<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
	<meta charset="utf-8" />
	<title>用户登录</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	<meta name="MobileOptimized" content="320">
	<!-- BEGIN GLOBAL MANDATORY STYLES -->          
	<link href="__STATIC__/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="__STATIC__/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="__STATIC__/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
	<!-- END GLOBAL MANDATORY STYLES -->
    
	<!-- BEGIN THEME STYLES --> 
	<link href="__STATIC__/css/style-metronic.css" rel="stylesheet" type="text/css"/>
	<link href="__STATIC__/css/style.css" rel="stylesheet" type="text/css"/>
	<link href="__STATIC__/css/style-responsive.css" rel="stylesheet" type="text/css"/>
	<link href="__STATIC__/css/plugins.css" rel="stylesheet" type="text/css"/>
	<link href="__STATIC__/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
	<link href="__STATIC__/css/pages/login.css" rel="stylesheet" type="text/css"/>
	<link href="__STATIC__/css/custom.css" rel="stylesheet" type="text/css"/>
	<!-- END THEME STYLES -->
	<link rel="shortcut icon" href="favicon.ico" />
</head>
<!-- BEGIN BODY -->
<body class="login">
	<!-- BEGIN LOGO -->
	<div class="logo">
		<!--img src="__STATIC__/img/logo-big.png" alt="" /--> 
	</div>
	<!-- END LOGO -->
	<!-- BEGIN LOGIN -->
	<div class="content">
		<!-- BEGIN LOGIN FORM -->
		<form class="login-form"  action="{:U('login')}" method="post">
			<h3 class="form-title">励合化学</h3>
			<div class="alert alert-danger display-hide">
				<button class="close" data-close="alert"></button>
				<span>请输入用户名和密码。</span>
			</div>
			<div class="form-group">
				<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
				<label class="control-label visible-ie8 visible-ie9">用户名</label>
				<div class="input-icon">
					<i class="fa fa-user"></i>
					<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="用户名" name="username"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label visible-ie8 visible-ie9">密码</label>
				<div class="input-icon">
					<i class="fa fa-lock"></i>
					<input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="密码" name="password"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label visible-ie8 visible-ie9">验证码</label>
				<div class="input-icon">
					<i class="fa fa-star"></i>
					<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="验证码" name="verify"/>
				</div>
                <div>
                    <img class="verifyimg reloadverify" alt="点击切换" src="{:U('Public/verify')}">
                </div>
                <a class="reloadverify" title="换一张" href="javascript:void(0)">换一张？</a>
			</div>
			<div class="form-actions">
                <a href="{:U('lostpwd')}" class="btn default pull-right">   
               		<span>找回密码</span>
                </a> 
				<button type="submit" class="btn green pull-right">
                    <span class="in"><i class="icon-loading"></i>登 录 中 ...</span>
                    <span class="on">登 录<i class="m-icon-swapright m-icon-white"></i></span> 
				</button>  
            	<div class="check-tips"></div>       
			</div>
		</form>
		<!-- END LOGIN FORM -->        
	</div>
	<!-- END LOGIN -->
	<!-- BEGIN COPYRIGHT -->
	<div class="copyright">
		2014 &copy; slpi1.
	</div>
	<!-- END COPYRIGHT -->
	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->   
	<!--[if lt IE 9]>
	<script src="__STATIC__/plugins/respond.min.js"></script>
	<script src="__STATIC__/plugins/excanvas.min.js"></script> 
	<![endif]-->   
	<script src="__STATIC__/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script src="__STATIC__/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
	<script src="__STATIC__/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="__STATIC__/plugins/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript" ></script>
	<script src="__STATIC__/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
	<script src="__STATIC__/plugins/jquery.blockui.min.js" type="text/javascript"></script>  
	<script src="__STATIC__/plugins/jquery.cookie.min.js" type="text/javascript"></script>
	<script src="__STATIC__/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<script src="__STATIC__/plugins/backstretch/jquery.backstretch.min.js" type="text/javascript"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="__STATIC__/scripts/app.js" type="text/javascript"></script> 
	<!-- END PAGE LEVEL SCRIPTS --> 
	<script>
	jQuery(document).ready(function() {     
		//App.init();
		
		$.backstretch([
		        "Public/s/img/bg/1.jpg",
		        "Public/s/img/bg/2.jpg",
		        "Public/s/img/bg/3.jpg",
		        "Public/s/img/bg/4.jpg",
		        ], {
		          fade: 1000,
		          duration: 8000
		    });
		
		//表单提交
		$(document)
			.ajaxStart(function(){
				$("button:submit").addClass("log-in").attr("disabled", true);
			})
			.ajaxStop(function(){
				$("button:submit").removeClass("log-in").attr("disabled", false);
			});
		
		$('.login-form').submit(function(){
			var self = $(this);
			$.post(self.attr("action"), self.serialize(), success, "json");
			return false;
		
			function success(data){
				if(data.status){
					window.location.href = data.url;
				} else {
					self.find(".check-tips").text(data.info);
					//刷新验证码
					$(".reloadverify").click();
				}
			}
		});
			
		$('.login-form input').keypress(function (e) {
			if (e.which == 13) {
				$('.login-form').submit();
			}
		});
		
		$(function(){
			//初始化选中用户名输入框
			$(".form-group").find("input[name=username]").focus();
			//刷新验证码
			var verifyimg = $(".verifyimg").attr("src");
			$(".reloadverify").click(function(){
				if( verifyimg.indexOf('?')>0){
					$(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
				}else{
					$(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
				}
			});
		
			//placeholder兼容性
				//如果支持 
			function isPlaceholer(){
				var input = document.createElement('input');
				return "placeholder" in input;
			}
				//如果不支持
			if(!isPlaceholer()){
				$(".placeholder_copy").css({
					display:'block'
				})
				$(".form-group input").keydown(function(){
					$(this).parents(".item").next(".placeholder_copy").css({
						display:'none'
					})                    
				})
				$(".form-group input").blur(function(){
					if($(this).val()==""){
						$(this).parents(".item").next(".placeholder_copy").css({
							display:'block'
						})                      
					}
				})
				
				
			}
		});
	});
	</script>
	<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>